<!DOCTYPE html>
<html>
    <head>
        <style>
			body {
				margin:0px;
			}
			ul {
				list-style-type:none;
				margin:0;
				padding:0;
				overflow:hidden;
			}
			/** 因为li是块级元素，使用浮动让其变成行内元素 */
		  li { float:left; } 
			a:link,a:visited {
				display:block; 
				width: 150px;
				font-weight:bold;
				color:#FFFFFF;
				background-color:#98bf21;
				text-align:center;
				padding:10px;
				text-decoration:none;
				text-transform:uppercase;
			}
			a:hover,a:active {
				background-color:#7A991A;
			}
			li.dividerV {
				border-left-style:solid;
				border-left-color:#00F;
				border-left-width:1px
			}
        
        </style>
    </head>
    
    <body>
        <ul>
            <li><a href="#home">Home</a></li>
            <li class="dividerV"><a href="#news">News</a></li>
            <li class="dividerV"><a href="#contact">Contact</a></li>
            <li class="dividerV"><a href="#about">About</a></li>
        </ul>
    </body>
</html>	